<html>
<head>
<title>AFG Compare Tool</title>
<style type="text/css">
<!--
#header {
  float: right;
  top: 5px;
  left: 5px;
  width: 100px;
  height: 80px;
  border: 1px;
  border-style: solid;
  margin: 2px;
  padding: 2px;
}
#query {
  position: absolute;
  top: 5px;
  left: 155px;
}
html {
  font-family: arial;
}
-->
</style>
<body>
<div id="header">
<center><img src="/static/2shoes.jpg"></center>
<center><font size=-1>AFG Compare</font></center>
</div>

<i>note: the volunteermatch comparison is *strictly* for quality testing
purposes only, i.e. this is not a 'competitive' system etc. -- the idea
is to detect horrible bugs by looking at how another high quality site
does on the same query.</i><br/>

<form action="/vmcompare" method="GET">
<table>
<tr>
  <td>Query:</td>
  <td><input type="text" name="query" value="{{ query }}" size="60"></td>
</tr>
<tr>
  <td>Location:</td>
  <td><input type="text" name="loc" value="{{ location }}" size="60"></td>
  <td><input type="submit" value="Submit"></td>
</tr>

</table>
{% if results %}
<hr>
Results for {{ left_url }}<br>
Results for {{ right_url }}

<table border=1>
<tr>
<td>{{ left_url }}<br>
Latency: {{ left_latency }} msec
</td>
<td>{{ right_url }}<br>
</td>
</tr>
<tr>

<!-- left side results: AFG -->
<td valign="top">
<table>
{% for result in left_results %}
<tr>
<td>
{{ forloop.counter }}. <a href="{{result.link}}"><strong>{{ result.title }}</strong></a><br>
<font size=-1>dates: {{ result.startdate }}<br>
{{ result.end }}  location: {{ result.location }}<br>
{{ result.description }}<br>
</font>
{% ifequal forloop.counter 3 %}<br>{% endifequal %}
{% ifequal forloop.counter 5 %}<br>{% endifequal %}
</td>
</tr>


{% endfor %}
</table>
</td>

<!-- right side: VM in iframe -->
<td width="66%" height="100%" valign='top'>
<iframe src="{{ right_url }}" width="100%" height="800">
</iframe>
</td>

</tr>
</table>

{% endif %}
<hr>

<table>
<tr>
<td>Left:</td>
<td>
  <input type="text" name="left" size="60" value="{{left_base_url}}">
</td>
</tr>
<tr>
<td>Right:</td>
<td>
  VolunteerMatch
</td>
</tr>
</table>

</form>
</body>
</html>
